<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            /*background-color: #bbffaa;*/
            /*
                通过渐变可以设置一些复杂的背景颜色，可以从一个颜色向其他颜色进行过度的效果
                !!!!渐变是图片,需要通过background-image来设置

                线性渐变,颜色沿着一条直线发生变化
                    linear-gradient()

                    linear-gradient(red,yellow)红色开头,黄色结尾,中间是过渡区域
                    -线性渐变的开头,我们可以指定一个渐变的方向
                    to left
                    to right
                    to bottom
                    to top
                    xxxdeg deg表示度数
                    turn 表示圈

                   -渐变可以同时指定多个颜色,多个颜色默认情况下平均分布
                    也可以手动指定渐变的分布情况

                    repeating-linear-gradient()可以平铺的线性渐变
             */
            /*background-image: linear-gradient(red 10px,yellow 100px,green 150px,orange 200px);*/
            background-image: repeating-linear-gradient(red 50px,yellow 70px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>